<template>
  <div id="app">
    
    <el-container style="min-width: 1280px">
      
      <el-header style="padding: 0; height: 50px">
        <head-bar v-show="bHead"></head-bar>
      </el-header>
      <el-container :style="cHeight" style="background: #f7f7f7; height: 100%">
        <el-aside width="10%" style="background: #fff">
          <aside-bar v-show="aside"></aside-bar>
        </el-aside>
        <el-main>
          <router-view></router-view>
        </el-main>
        
      </el-container>
      
    </el-container>
    
  </div>
  
</template>

<script>
import { mapGetters } from "vuex";
import HeadBar from "./assets/components/headBar";
import AsideBar from "./assets/components/asideBar";
export default {
  name: "app",
  components: { AsideBar, HeadBar },
  data() {
    return {
      cHeight: "",
      asideHeight: "",
    };
  },
  mounted() {
    let wHeight = document.body.clientHeight;
    let cHeight = wHeight - 100;
    this.cHeight = "min-height:" + cHeight + "px";
    this.asideHeight = "height:" + cHeight + "px";
    this.routeChange(this.$route); //刷新后，在mounted时，取到路由对象
    console.log(1.3221)
  },
  methods: {
    routeChange(route) {
    
      // console.log(route.path);//路由变化之后的路径
      let path = route.path;
      if (/login/.test(path)) {
        this.$store.dispatch("hideHead");
        this.$store.dispatch("hideAside");
      } else {
        this.$store.dispatch("showHead");
        this.$store.dispatch("showAside");
      }
    },
  },
  computed: mapGetters(["bHead", "aside"]),
  watch: {
    $route(route) {
      //route==一路由信息对象
      this.routeChange(route);
    },
  },
};
</script>

<style>
.content {
  padding: 1.875rem;
}
.title {
  height: 3rem;
  display: flex;
  justify-content: space-between;
  align-items: center;
  border-bottom: 1px #efefef solid;
}
.title > div {
  border-left: 0.375rem #2355f5 solid;
  line-height: 0.5rem;
  padding-left: 1.1rem;
  font-weight: 600;
}
.add{
  /* position: absolute;
  right: 2%;
  top: 8%; */
  text-align: right;
}

.sta{
  font-size: 1.11rem;
  font-weight: 550;
  margin-left:0.8rem;
}

.avatar-uploader .el-upload {
    border: 1px dashed #d9d9d9;
    border-radius: 6px;
    cursor: pointer;
    position: relative;
    overflow: hidden;
  }
  .avatar-uploader .el-upload:hover {
    border-color: #409EFF;
  }
  .avatar-uploader-icon {
    font-size: 28px;
    color: #8c939d;
    width: 100px;
    height: 100px;
    line-height: 100px;
    text-align: center;
  }


  .demo-upload-list {
  display: inline-block;
  width: 100px;
  height: 100px;
  text-align: center;
  line-height: 100px;
  border: 1px solid transparent;
  border-radius: 4px;
  overflow: hidden;
  background: #fff;
  position: relative;
  box-shadow: 0 1px 1px rgba(0, 0, 0, 0.2);
  margin-right: 4px;
}

.demo-upload-list img {
  width: 100%;
  height: 100%;
}

.demo-upload-list-cover {
  display: none;
  position: absolute;
  top: 0;
  bottom: 0;
  left: 0;
  right: 0;
  background: rgba(0, 0, 0, 0.6);
}

.demo-upload-list:hover .demo-upload-list-cover {
  display: block;
}

.demo-upload-list-cover .icon {
  color: #fff;
  font-size: 20px;
  cursor: pointer;
  margin: 0 2px;
}
</style>
